import nextpy as xt


def navbar() -> xt.Component:
    return xt.box(
        xt.hstack(
            xt.image(src="/logo_darkmode.svg", width="120px"),
            xt.box(
                xt.link(
                    "Manifesto",
                    href="/",
                    color="#D0D1D3",
                    font_size="14px",
                    _hover={"text_decoration": "none"},
                ),
                xt.link(
                    "Documentation",
                    href="/",
                    color="#111113",
                    font_size="14px",
                    bg="#EDEEF0",
                    _hover={"text_decoration": "none"},
                    class_name="py-1 px-2  font-bold rounded-md",
                ),
                xt.link(
                    "Hackathon",
                    href="/",
                    color="#D0D1D3",
                    font_size="14px",
                    _hover={"text_decoration": "none"},
                ),
                xt.link(
                    "App Templates",
                    href="/",
                    color="#D0D1D3",
                    font_size="14px",
                    _hover={"text_decoration": "none"},
                ),
                class_name="gap-6 hidden md:flex items-center text-sm",
            ),
            xt.box(
                xt.link(
                    "Support",
                    href="/",
                    color="#D0D1D3",
                    font_size="14px",
                    _hover={"text_decoration": "none"},
                ),
                xt.link(
                    xt.image(src="/discord.svg", width="1.2rem"),
                    href="https://github.com/dot-agent/nextpy",
                    is_external=True,
                ),
                xt.link(
                    xt.image(src="/github-mark.svg", width="1.2rem"),
                    href="https://github.com/dot-agent/nextpy",
                    is_external=True,
                ),
                xt.link(
                    xt.image(src="/colormode.svg", width="1.2rem"),
                    is_external=True,
                ),
                class_name="flex items-center flex-row gap-6",
            ),
            justify_content="space-between",
            align_items="center",
        ),
        height="55px",
        class_name="py-2 px-8 block",
        width="100%",
        position='fixed',
        top='0px',
        z_index = '1',
        bg = 'black'
    )
